﻿@{
    ViewBag.Title = "Index";
    Layout = "~/Areas/Manage/Views/Shared/_SubPage.cshtml";
}
@section Header{
    <link type="text/css" rel="stylesheet" href="~/Content/vendors/jquery-file-upload/css/jquery.fileupload.css" />
    <link type="text/css" rel="stylesheet" href="~/Content/vendors/lightbox/css/lightbox.css">
}
@section Footer{
    <script src="~/Content/vendors/lightbox/js/lightbox.min.js"></script>
    <script src="~/Content/vendors/jquery-file-upload/js/vendor/jquery.ui.widget.js"></script>
    <script src="~/Content/vendors/jquery-file-upload/js/jquery.iframe-transport.js"></script>
    <script src="~/Content/vendors/jquery-file-upload/js/jquery.fileupload.js"></script>
    <script type="text/javascript">
        var ejApp = angular.module('ejapp', ['angular-icheck']);
        ejApp.controller('mainCtrl', [
            '$scope', '$http', function($scope, $http) {
                var idStr = 'Id'; //Id的字符串
                var loadUrl = Backstage + "/Link/Paging";
                var addUrl = Backstage + "/Link/Add";
                var updateUrl = Backstage + "/Link/Update";
                var updatesUrl = Backstage + "/Link/Updates";
                var removeUrl = Backstage + "/Link/Remove";
                var removesUrl = Backstage + "/Link/Removes";
                var uploadUrl = Backstage + "/Link/Upload";


                $scope.subject = '友情链接'; //当前页的主题名称
                $scope.sIndex = -1; //当前选中的行号
                $scope.eModel = {}; //当前编辑的对象模型
                $scope.datas = []; //当前列表显示的对象数组
                $scope.pIndex = 1; //当前显示的页索引
                $scope.tPages = 0; //当前共有多少页
                $scope.tModels = 0; //当前共有多少个对象
                $scope.pSize = 20; //当前每页显示多少个对象
                $scope.pSizes = EJ.pageSizes; //允许分页的数量的数组
                $scope.navIndexes = []; //分页导航器显示的页号数组
                $scope.query = {}; //查询条件对象
                $scope.sortP = ''; //排序属性
                $scope.sortD = ''; //排序方向
                $scope.imageWidth = 600;
                $scope.imageHeight = 600;
                $scope.onSubmit = false; //是否提交


                $scope.load = function() {
                    //数据加载
                    var req = {
                        //组装请求参数
                        PageIndex: $scope.pIndex,
                        PageSize: $scope.pSize,
                        Query: $scope.query,
                        SortProperty: $scope.sortP,
                        SortDirection: $scope.sortD
                    };
                    showLoading();
                    $http.post(loadUrl, req)
                        .success(function(rsp) {
                            if (rsp.Success) {
                                $scope.datas = rsp.Models;
                                $scope.tPages = rsp.TotalPages;
                                $scope.tModels = rsp.TotalModels;
                                $scope.navIndexes = EJ.getPageIndexes($scope.pIndex, $scope.tPages, 5);
                            } else {
                                EJ.showError(rsp.Message);
                            }
                            hideLoading();
                        })
                        .error(errorFn);
                };
                $scope.doAdd = function() { //添加
                    $scope.sIndex = -1;
                    $scope.onSubmit = false;
                    $scope.eModel = {
                        'IsEnabled': true,
                        'DisplayIndex': $scope.tModels + 1,
                        'IsBlank': false,
                        'ImageWidth': $scope.imageWidth,
                        'ImageHeight': $scope.imageHeight,
                        'AddTime': EJGetDateNow(),
                        'JumpLink': "https://"
                    }
                    $('#modal-edit').modal();
                };
                $scope.doRemove = function(o) { //删除指定对象
                    EJ.confimWarn('确定要删除指定的' + $scope.subject + '吗?', function() {
                        $http.post(removeUrl, { "id": o[idStr] })
                            .success(function(rsp) {
                                if (rsp.Success) {
                                    EJ.showSuccess("删除成功");
                                    $scope.datas.remove(o);
                                    $scope.tModels--;
                                } else {
                                    EJ.showError(rsp.Message);
                                }
                            })
                            .error(errorFn);
                    });
                };
                $scope.doRemoves = function() { //批量删除选择对象
                    if ($scope.datas.length == 0) return;
                    var ids = [];
                    $scope.datas.forEach(function(o) {
                        if (o.Checked) {
                            ids.push(o[idStr]);
                        }
                    });
                    var length = ids.length;
                    if (length > 0) {
                        EJ.confimWarn('确定要删除选中的' + length + '条' + $scope.subject + '记录吗?', function() {
                            $http.post(removesUrl, { "ids": ids })
                                .success(function(rsp) {
                                    if (rsp.Success) {
                                        EJ.showSuccess("删除成功");
                                        $scope.tModels -= length;
                                        $scope.datas = $scope.datas.filter(function(o) { return o.Checked == undefined || o.Checked == false; });
                                    } else {
                                        EJ.showError(rsp.Message);
                                    }
                                })
                                .error(errorFn);
                        });
                    } else {
                        EJ.toastrInfo("请选择要操作的" + $scope.subject + "！");
                    }
                };
                $scope.doUpdate = function(o) { //编辑
                    $scope.sIndex = $scope.datas.indexOf(o);
                    $scope.onSubmit = false;
                    $scope.eModel = angular.copy(o);
                    $scope.eModel.tempImageUrl = $scope.eModel.ImageUrl;
                    $('#modal-edit').modal();
                };
                $scope.doUpdates = function(p, v) { //批量编辑选择对象
                    if ($scope.datas.length == 0) return;
                    var ids = [];
                    $scope.datas.forEach(function(o) {
                        if (o.Checked) {
                            ids.push(o[idStr]);
                        }
                    });
                    var length = ids.length;
                    if (length > 0) {
                        EJ.confimWarn('确定要批量编辑选中的' + length + '条' + $scope.subject + '记录吗?', function() {
                            $http.post(updatesUrl, { "Ids": ids, "Property": p, "Value": v })
                                .success(function(rsp) {
                                    if (rsp.Success) {
                                        EJ.showSuccess("编辑成功");
                                        $scope.datas.forEach(function(item) {
                                            if (item.Checked == true && item[p] != v) {
                                                item[p] = v;
                                            }
                                        });
                                    } else {
                                        EJ.showError(rsp.Message);
                                    }
                                })
                                .error(errorFn);
                        });
                    } else {
                        EJ.toastrInfo("请选择要操作的" + $scope.subject + "！");
                    }
                };
                $scope.save = function(valid) {
                    $scope.onSubmit = true;
                    if (!valid) return;
                    showLoading();
                    var isAdd = $scope.sIndex == -1;
                    var url = isAdd ? addUrl : updateUrl;
                    $http.post(url, { "model": $scope.eModel, "tempImageUrl": $scope.eModel.tempImageUrl })
                        .success(function(rsp) {
                            if (rsp.Success) {
                                EJ.showSuccess("保存成功!");
                                if (isAdd) {
                                    $scope.eModel[idStr] = rsp.Message;
                                    $scope.eModel['ImageUrl'] = $scope.eModel.tempImageUrl;
                                    $scope.datas.push($scope.eModel);
                                    $scope.tModels++;
                                } else {
                                    $scope.eModel.ImageUrl = $scope.eModel.tempImageUrl;
                                    $scope.datas[$scope.sIndex] = $scope.eModel;

                                }
                                $('#modal-edit').modal('hide');
                            } else {
                                EJ.showError(rsp.Message);
                            }
                            hideLoading();
                        })
                        .error(errorFn)
                };

                $scope.gotoPrePage = function() {
                    if ($scope.pIndex > 1) {
                        $scope.pIndex--;
                        $scope.load();
                    }
                }
                $scope.gotoNextPage = function() {
                    if ($scope.pIndex < $scope.tPages) {
                        $scope.pIndex++;
                        $scope.load();
                    }
                }
                $scope.gotoFirstPage = function() {
                    if ($scope.pIndex > 1) {
                        $scope.pIndex = 1;
                        $scope.load();
                    }
                }
                $scope.gotoLastPage = function() {
                    if ($scope.pIndex < $scope.tPages) {
                        $scope.pIndex = $scope.tPages;
                        $scope.load();
                    }
                }
                $scope.gotoPageBy = function(i) {
                    if (i >= 1 && i <= $scope.tPages) {
                        $scope.pIndex = i;
                        $scope.load();
                    }
                }
                $scope.$watch('pSize', function() {
                    $scope.pIndex = 1;
                    $scope.load();
                }); //会导致初始化加载
                $scope.search = function() {
                    $scope.pIndex = 1;
                    $scope.sortD = '';
                    $scope.sortP = '';
                    $scope.load();
                }
                $scope.reSearch = function() { $scope.query = {} }
                $scope.doOrder = function(p) {
                    if ($scope.sortP == p) {
                        $scope.sortD = ($scope.sortD == 'asc' ? 'desc' : 'asc');
                    } else {
                        $scope.sortP = p;
                        $scope.sortD = 'asc';
                    }
                    $scope.load();
                };
                $scope.doSelect = function(data, e) {
                    if (data.length > 0) {
                        data.forEach(function(o) { o.Checked = e; });
                    }
                }
                $scope.doReSelect = function(data) {
                    if (data.length > 0) {
                        data.forEach(function(o) { o.Checked = !o.Checked; });
                    }
                }


                //图片上传
                $scope.upload = function() {
                    $('#fileupload').fileupload({
                            url: uploadUrl,
                            dataType: 'json',
                            success: function(data) {
                                if (data.Success) {
                                    var url = data.Model[0];
                                    $scope.$apply(function() {
                                        $scope.eModel.tempImageUrl = url;
                                    });
                                } else {
                                    EJToastr.error(data.Message);
                                }
                            },
                            progressall: function(e, data) {
                                var progress = parseInt(data.loaded / data.total * 100, 10);
                                $('#progress .progress-bar').css(
                                    'width',
                                    progress + '%'
                                );
                            }
                        }).prop('disabled', !$.support.fileInput)
                        .parent().addClass($.support.fileInput ? undefined : 'disabled');
                }
                $scope.resetUpload = function() { //重置图片
                    $scope.eModel.tempImageUrl = $scope.eModel.ImageUrl;
                }
                $scope.$watch('eModel.tempImageUrl', function() {
                    var url = '';
                    if ($scope.eModel.tempImageUrl) {
                        url = $scope.eModel.tempImageUrl;
                    }
                    $("#imgPreview").attr('src', url);
                    $("#aPreview").attr('href', url);
                });

            }
        ]).filter('convertDate', function() {
            var convertTime = function(date) {
                return EjConvertDateFormat(date, "yyyy年MM月dd日 HH:mm:ss");
            }
            return convertTime;
        });
    </script>
}

<div class="wrapper wrapper-content animated fadeInUp">
    <div class="row  animated slideInLeft">
        <div class="col-lg-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5><i class="fa fa-search"></i>&nbsp;&nbsp;搜索栏</h5>
                    <div class="ibox-tools"><a class="collapse-link"><i class="fa fa-chevron-up"></i></a></div>
                </div>
                <div class="ibox-content">
                    <form role="form" id="searchform">
                        <div class="row">
                            <div class="col-sm-4">
                                <div class="form-group">
                                    <label>名称:</label>
                                    <input ng-model="query.Name" type="text" placeholder="输入关键字查询" class="form-control" />
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <div class="form-group">
                                    <label>状态:</label>
                                    <select class="form-control" ng-model="query.IsEnabled">
                                        <option value="">==请选择==</option>
                                        <option value="true">启用</option>
                                        <option value="false">禁用</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <div class="form-group">
                                    <label>新窗口:</label>
                                    <select class="form-control" ng-model="query.IsBlank">
                                        <option value="">==请选择==</option>
                                        <option value="true">是</option>
                                        <option value="false">否</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <div class="form-group">
                                    <label>&nbsp;</label>
                                    <div class="col-sm-12">
                                        <button type="button" class="btn btn-primary btn-sm" ng-click="search()">提交查询</button>&nbsp;
                                        <button type="reset" class="btn btn-default btn-sm" ng-click="reSearch()">重置查询</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="row  animated slideInRight">
        <div class="col-sm-12">
            <div class="ibox">
                <div class="ibox-title">
                    <h5><i class="fa fa-database"></i>&nbsp;&nbsp;{{subject}}管理</h5>
                    <div class="ibox-tools">
                        <button type="button" ng-click="doAdd()" class="btn btn-primary btn-xs">添加&nbsp;<i class="fa fa-plus"></i></button>
                        <button type="button" ng-click="doRemoves()" class="btn btn-danger btn-xs">删除&nbsp;<i class="fa fa-trash-o"></i></button>
                        <div class="btn-group">
                            <button type="button" data-toggle="dropdown" class="btn btn-primary btn-xs dropdown-toggle">状态操作 &nbsp;<span class="caret"></span></button>
                            <ul role="menu" class="dropdown-menu">
                                <li>
                                    <a ng-click="doUpdates('IsEnabled',true)">全部启用</a>
                                </li>
                                <li>
                                    <a ng-click="doUpdates('IsEnabled',false)">全部禁用</a>
                                </li>
                                <li>
                                    <a ng-click="doUpdates('IsBlank',true)">全部新窗口</a>
                                </li>
                                <li>
                                    <a ng-click="doUpdates('IsBlank',false)">全部本窗口</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="ibox-content">
                    <table class="table table-hover table-striped table-bordered table-advanced tablesorter" id="data_container">
                        <thead>
                            <tr>
                                <th class="text-center" width="30px">
                                    <div class="btn-group">
                                        <button data-toggle="dropdown" class="btn btn-primary btn-xs dropdown-toggle"><span class="caret"></span></button>
                                        <ul class="dropdown-menu dropdown-menu-right">
                                            <li>
                                                <a ng-click="doSelect(datas,true)">全选</a>
                                            </li>
                                            <li>
                                                <a ng-click="doSelect(datas,false)">全不选</a>
                                            </li>
                                            <li class="divider"></li>
                                            <li>
                                                <a ng-click="doReSelect(datas)">反选</a>
                                            </li>
                                        </ul>
                                    </div>
                                </th>
                                <th class="text-center" width="80px">Id</th>
                                <th class="text-center" width="140px">名称</th>
                                <th class="text-center">跳转链接</th>
                                <th class="text-center" width="140px">图片</th>
                                <th class="text-center" width="100px">排序</th>
                                <th class="text-center" width="100px">状态</th>
                                <th class="text-center" width="100px">新窗口</th>
                                <th class="text-center" width="140px">添加时间</th>
                                <th class="text-center" width="140px">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr ng-repeat="item in datas">
                                <td class="text-center"><input type='checkbox' icheck ng-model="item.Checked" /></td>
                                <td class="text-center" ng-bind="item.Id"></td>
                                <td class="text-center" ng-bind="item.Name"></td>
                                <td class="text-center"><a target="_blank" href="{{item.JumpLink}}">{{item.JumpLink}}</a></td>
                                <td class="text-center">
                                    <img width="64" height="64" src="{{item.ImageUrl}}" ng-show="item.ImageUrl!=''" alt="" />
                                </td>
                                <td class="text-center" ng-bind="item.DisplayIndex"></td>
                                <td class="text-center">
                                    <span class="label label-sm label-primary" ng-show="item.IsEnabled">启用</span>
                                    <span class="label label-sm label-danger" ng-show="item.IsEnabled==false">禁用</span>
                                </td>
                                <td class="text-center">
                                    <span class="label label-sm label-primary" ng-show="item.IsBlank">是</span>
                                    <span class="label label-sm label-danger" ng-show="item.IsBlank==false">否</span>
                                </td>
                                <td class="text-center" ng-bind="item.AddTime|convertDate"></td>
                                <td class="text-center">
                                    <button type='button' class='btn btn-info btn-xs' ng-click='doUpdate(item)'><i class='fa fa-edit'></i>&nbsp;编辑</button>&nbsp;
                                    <button type='button' class='btn btn-danger btn-xs' ng-click='doRemove(item)'><i class='fa fa-trash-o'></i>&nbsp;删除</button>
                                </td>
                            </tr>
                        </tbody>
                        <tfoot ng-show="tModels==0">
                            <tr>
                                <td colspan="10"><p class="text-center">没有找到记录.</p></td>
                            </tr>
                        </tfoot>
                    </table>
                    <div class="row" ng-show="tModels>0">
                        <div class="col-sm-6 form-inline">
                            <div class="form-group">
                                <label class="control-label"> 总 <span class="require">{{tPages}}</span>页  |  每页显示&nbsp;</label>
                                <select class="form-control input-xsmall input-sm input-inline" ng-model="pSize">
                                    <option value="{{item}}" ng-repeat="item in pSizes" ng-selected="item == pSize">{{item}}</option>
                                </select>
                                <label class="control-label">&nbsp; 条记录 | 共找到 <span class="require">{{tModels}} </span>条记录</label>
                            </div>
                        </div>
                        <div class="col-sm-6 text-right">
                            <div class="btn-group">
                                <button type="button" class="btn btn-white" ng-click="gotoFirstPage()" title="首页">
                                    <i class="fa fa-angle-double-left"></i>
                                </button>
                                <button type="button" class="btn btn-white" ng-click="gotoPrePage()" title="上一页">
                                    <i class="fa fa-angle-left"></i>
                                </button>
                                <button ng-repeat="i in navIndexes" class="btn btn-white" ng-class="{'active':i==pIndex}" ng-click="gotoPageBy(i)">{{i}}</button>
                                <button type="button" class="btn btn-white" ng-click="gotoNextPage()" title="下一页">
                                    <i class="fa fa-angle-right"></i>
                                </button>
                                <button type="button" class="btn btn-white" ng-click="gotoLastPage()" title="末页">
                                    <i class="fa fa-angle-double-right"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="modal-edit" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="modal-stackable-label" aria-hidden="true" class="modal fade">
    <div class="modal-dialog  modal-lg">
        <form name="eForm" ng-submit="save(eForm.$valid)" class="form-horizontal form-bordered form-row-stripped" role="form" novalidate>
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" data-dismiss="modal" aria-hidden="true" class="close">&times;</button>
                    <h4 id="modal-stackable-label" class="modal-title">{{subject}}-编辑</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-sm-12" ng-class="{'state-error':eForm.Name.$invalid&&onSubmit}">
                            <label class="control-label">名称:<span class="require">*</span></label>
                            <input type="text" name="Name" ng-model="eModel.Name" ng-required="true" class="form-control" />
                            <em ng-show="eForm.Name.$invalid&&onSubmit" class="invalid">必填字段!</em>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12" ng-class="{'state-error':eForm.JumpLink.$invalid&&onSubmit}">
                            <label class="control-label">跳转链接:<span class="require">*</span></label>
                            <input type="url" name="JumpLink" ng-model="eModel.JumpLink" ng-required="true" class="form-control" />
                            <em ng-show="eForm.JumpLink.$invalid&&onSubmit" class="invalid">必填字段!</em>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-3" ng-class="{'state-error':eForm.DisplayIndex.$invalid&&onSubmit}">
                            <label class="control-label">排序:<span class="require">*</span></label>
                            <input type="number" name="DisplayIndex" ng-model="eModel.DisplayIndex" ng-required="true" class="form-control" />
                            <em ng-show="eForm.DisplayIndex.$invalid&&onSubmit" class="invalid">必填字段!</em>
                        </div>
                        <div class="col-sm-3">
                            <p class="m-t">
                                <input id="cbIsBlank" type="checkbox" icheck value="true" ng-model="eModel.IsBlank" />
                                <label for='cbIsBlank'>是否跳转新窗口</label>
                            </p>
                        </div>
                        <div class="col-sm-3">
                            <p class="m-t">
                                <input id="cbIsEnabled" type="checkbox" icheck value="true" ng-model="eModel.IsEnabled" />
                                <label for='cbIsEnabled'>是否启用</label>
                            </p>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-3">
                            <div class="col-sm-12">
                                <label class="control-label">预览:</label>
                                <div class="img thumbnail" style="width: 200px; height: 160px; overflow:hidden">
                                    <a id="aPreview" href="" data-lightbox="image-item-newitem">
                                        <img id="imgPreview" class="img-responsive" />
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-9">
                            <div class="col-sm-12">
                                <div class="col-sm-12">
                                    <label class="control-label">图片:<span class="require">默认宽度：{{imageWidth}}默认高度：{{imageHeight}}</span></label>
                                    <input type="text" ng-readonly="true" class="form-control" ng-model="eModel.tempImageUrl" />
                                </div>
                            </div>
                            <div class="col-sm-12">
                                <div class="col-sm-6" ng-class="{'state-error':eForm.ImageWidth.$invalid&&onSubmit}">
                                    <label class="control-label">宽度:<span class="require">*</span></label>
                                    <input type="number" name="ImageWidth" ng-model="eModel.ImageWidth" ng-required="true" class="form-control" />
                                    <em ng-show="eForm.ImageWidth.$invalid&&onSubmit" class="invalid">必填字段!</em>
                                </div>
                                <div class="col-sm-6" ng-class="{'state-error':eForm.ImageHeight.$invalid&&onSubmit}">
                                    <label class="control-label">高度:<span class="require">*</span></label>
                                    <input type="number" name="ImageHeight" ng-model="eModel.ImageHeight" ng-required="true" class="form-control" />
                                    <em ng-show="eForm.ImageHeight.$invalid&&onSubmit" class="invalid">必填字段!</em>
                                </div>
                            </div>
                            <div class="col-sm-12">
                                <br />
                                <span class="btn btn-success fileinput-button" ng-click="upload()">
                                    <i class="glyphicon glyphicon-plus"></i>
                                    <span>上传图片</span>
                                    <input id="fileupload" type="file" name="files[]">
                                </span>
                                <span class="btn btn-warning" ng-click="resetUpload()">
                                    <i class="glyphicon glyphicon-plus"></i>
                                    <span>重置图片</span>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" id="btnSave" class="btn btn-primary">保存</button>
                    <button type="button" data-dismiss="modal" class="btn btn-default">关闭</button>
                </div>
            </div>
        </form>
    </div>
</div>


